<!-- 出库退货记录详情 -->
<template>
    <el-dialog v-model="open" :title="orderData.type || 'XS240224001'" width="1000px">
        <div class="order-detail-container">
            <!-- 上部信息区 -->
            <div class="info-header">
                <div class="info-grid">
                    <div class="info-item">
                        <div class="info-label">退货金额（元）</div>
                        <div class="info-value">{{ orderData.code || '4,000.00' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">付款方式</div>
                        <div class="info-value">{{ orderData.model || '2024-02-13' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">付款时间</div>
                        <div class="info-value">{{ orderData.unit || '2024-02-13' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">审批状态</div>
                        <div class="info-value">{{ orderData.stock || '全部回款' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">审批人</div>
                        <div class="info-value">{{ orderData.minStock || '3,000.00' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">备注</div>
                        <div class="info-value">{{ orderData.remark || '--' }}</div>
                    </div>

                </div>
            </div>

            <!-- 产品查询输入框 -->
            <div class="search-bar">
                <el-input v-model="productSearch" placeholder="产品名称/规格型号" style="width: 300px">
                    <template #prefix>
                        <el-icon>
                            <Search />
                        </el-icon>
                    </template>
                </el-input>
            </div>

            <!-- 产品列表表格 -->
            <div class="product-table">
                <el-table :data="orderData.children" border style="width: 100%">
                    <el-table-column label="产品名称" prop="name" min-width="auto" />
                    <el-table-column label="规格型号" prop="model" min-width="auto" />
                    <el-table-column label="单位" prop="unit" width="auto" align="center" />
                    <el-table-column label="出库数量" prop="minStock" width="auto" align="center" />
                    <el-table-column label="出库单价（元）" prop="maxStock" width="auto" align="center" />
                    <el-table-column label="折扣（%）" prop="minStock" width="auto" align="center" />
                    <el-table-column label="折后价（元）" prop="minStock" width="auto" align="center" />
                    <el-table-column label="最终成交价（元）" prop="minStock" width="auto" align="center" />
                    <el-table-column label="退货数量" prop="minStock" width="auto" align="center" />
                    <el-table-column label="退货金额（元）" prop="minStock" width="auto" align="center" />
                </el-table>
            </div>

            <!-- 表格底部合计 -->
            <div class="table-footer">
                <div class="summary-item">产品种类 ：<span>{{ orderData.totalProducts || '2' }}</span></div>
                <div class="summary-item">产品总数（个）：<span>{{ orderData.totalQuantity || '4.00' }}</span></div>
                <div class="summary-item">整单折扣（%）：<span>{{ orderData.totalDiscount || '0.00' }}</span></div>
                <div class="summary-item">出库总金额（元）：<span>{{ orderData.totalAmount || '6.00' }}</span></div>
            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="open = false">关闭</el-button>

            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, defineExpose } from "vue";
import { Search } from '@element-plus/icons-vue';

// 弹窗控制
const open = ref<boolean>(false);
// 订单数据
const orderData = ref<any>({});
// 产品搜索关键字
const productSearch = ref('');



// 过滤后的产品列表
// const filteredProducts = computed(() => {
//     if (!productSearch.value) return products.value;

//     const keyword = productSearch.value.toLowerCase();
//     return products.value.filter(item => 
//         item.name.toLowerCase().includes(keyword) || 
//         item.model.toLowerCase().includes(keyword)
//     );
// });

// 打开弹窗方法
const openLoading = (row?: any) => {
    open.value = true;
    if (row) {
        orderData.value = row;
        // 实际项目中可能需要通过API获取详细数据
        // 这里简单模拟一下
        console.log("加载订单详情:", orderData.value);
    }
};

defineExpose({
    openLoading
});
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
    --el-dialog-padding-primary: 0px;
}

::v-deep .el-dialog__header {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
}

::v-deep .dialog-footer {
    padding: 14px 20px;
    border-top: 1px solid #f0f0f0;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #000;
}

::v-deep .el-dialog__body {
    padding: 20px;
}

.order-detail-container {
    .info-header {
        margin-bottom: 20px;
        background-color: #f5f7fa;
        padding: 15px;
        border-radius: 4px;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .info-item {
        .info-label {
            color: #909399;
            font-size: 13px;
            margin-bottom: 8px;
        }

        .info-value {
            color: #333;
            font-weight: 500;
            font-size: 14px;
        }
    }

    .search-bar {
        margin-bottom: 15px;
    }

    .product-table {
        margin-bottom: 15px;

        :deep(.el-table) {
            --el-table-header-bg-color: #F5F7FA;

            th {
                background-color: var(--el-table-header-bg-color);
                color: #606266;
                font-weight: 500;
            }
        }
    }

    .table-footer {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 10px 0;
        border-top: 1px solid #EBEEF5;

        .summary-item {
            color: #606266;
            font-size: 14px;

            span {
                font-weight: 600;
                color: #333;
                margin-left: 5px;
            }
        }
    }
}
</style>
